<template>
  <div class="box">
  	<li v-for="item in shopcart" :key="item.id">
  		<div class="goods-box">
  			<div class="img-box">
  				<img :src="item.src">
  			</div>
  			<div class="goods-detail">
  				<p>{{item.title}}*{{item.num}}</p>
  				<p><span>￥</span>{{item.price}}</p>
  				<button @click="del(item)">删除</button>
  			</div>
  		</div>
  	</li>
	<p v-if="shopcart.length">总价:{{totalPrice}}</p>
	<p v-else>购物车暂无商品</p>
  </div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
export default {
	// computed:{
	// 	shopcart(){
	// 		return this.$store.state.shopcart
	// 	},
	// 	totalPrice(){
	// 		return this.$store.getters.totalPrice
	// 	}
	// }
	computed:{
		...mapState(['shopcart']),
		...mapGetters(['totalPrice'])
	},
	methods:{
		del(item){
			this.$store.commit('del',item)
		}
	}
}
</script>

<style scoped>
.box {
		margin-bottom: 40px;
	}

	li {
		list-style: none;
	}

	.goods-box {
		display: flex;
		padding: 10px 10px;
		border-bottom: 1px dashed darkgrey;
	}

	.goods-detail {
		font-weight: bold;
	}

	.img-box {
		width: 140px;
		height: 140px;
		border: 1px solid lightgrey;
		margin-right: 10px;
	}

	.goods-detail p span {
		color: red;
		margin-right: 2px;
	}

	.goods-detail button {
		border: 1px solid orangered;
		background: orangered;
		width: 100px;
		height: 30px;
		text-align: center;
		line-height: 25px;
		color: white;
	}
</style>